<template>
  <div class="early-warning-analysis inset-shadow">
    <cardTitle text="预警分析"/>
    <div class="card-left-2">
      <div class="radar-chart">
      </div>
      <div class="analysis-nums">
        <div class="nums-item">
          <div class="text">异常时间总数</div>
          <div>
            <span class="num">2850</span>
            <span class="unit">条</span>
          </div>
        </div>
        <div class="nums-item">
          <div class="text">平均响应时间</div>
          <div >
            <span class="num">2850</span>
            <span class="unit">时</span>
          </div>
        </div>
        <div class="nums-item">
          <div class="text">异常解决率</div>
          <div>
            <span class="num">2850</span>
            <span class="unit">%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cardTitle from '../cardTitle.vue'

import * as echarts from 'echarts'
import {leftOptions1} from '../../chartOptions'

export default {
  name: "earlyWarningAnalysis",
  props: {},
  components: {cardTitle},
  data() {
    return {

    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initRadarChart()
  },
  methods: {
    initRadarChart () {
      const dom = document.querySelector(".radar-chart")
      const chart = echarts.init(dom)
      chart.setOption(leftOptions1())
      window.addEventListener('resize', function () {
        chart.resize()
      })
    }
  },

};
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";
.early-warning-analysis{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-left-2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 px-to-rem(16px) px-to-rem(10px) px-to-rem(16px);
  box-sizing: border-box;

  .radar-chart {
    flex: 1;
    box-sizing: border-box;
  }

  .analysis-nums {
    height: 25%;
    display: flex;
    gap: 10px;

    .nums-item {
      flex: 1;
      text-align: center;
      background-color: rgba(0, 182, 255, 0.2);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 8px; /* 线条宽度 */
        height: 8px; /* 线条高度 */
        border-top: 2px solid #0770b0; /* 顶部线条 */
        border-left: 2px solid #0770b0; /* 左侧线条 */
      }

      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 8px; /* 线条宽度 */
        height: 8px; /* 线条高度 */
        border-bottom: 2px solid #0770b0; /* 顶部线条 */
        border-right: 2px solid #0770b0; /* 左侧线条 */
      }

      .text {
        color: rgba(255, 255, 255, 0.9);
        font-size: px-to-rem(13px);
      }

      .num {
        color: #0192d0;
        font-size: px-to-rem(16px);
        font-weight: bold;
      }

      .unit {
        color: #0884d4;
        font-size: px-to-rem(12px);
        padding-left: 3px;

      }
    }
  }
}
</style>
